<template>
    <div class="main">
        <arrow :topList="topList"></arrow>
        <div class="content">
            <div class="title_top">运营事项>版权审核</div>
            <div class="my_box">
                <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" >
                    <el-form-item label="关键词：" prop="keyWords">
                        <el-input v-model="queryParams.keyWords" placeholder="请输入关键词" clearable
                            @keyup.enter.native="handleQuery" />
                    </el-form-item>
                    <el-form-item label="素材类型：" prop="articleTopicType" style="padding-left: 30px;">
                        <el-select v-model="queryParams.articleTopicType" placeholder="请选择">
                            <el-option v-for="item in TypeList" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                    </el-form-item>
                </el-form>

                <el-table stripe v-loading="loading" :data="topicList" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55" align="center" />
                    <el-table-column label="内容编号" label-width="80px" prop="topicXh" />
                    <!-- <el-table-column label="展示编号" align="center" prop="topicXh" /> -->
                    <el-table-column label="内容名称" align="center" prop="title" />
                    <el-table-column label="内容目标" align="center" prop="target" />
                    <el-table-column label="内容开始时间" align="center" prop="startTime" width="180">
                        <template slot-scope="scope">
                            <span>{{ parseTime(scope.row.startTime, '{y}-{m}-{d}') }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="内容类型" align="center" prop="type" />
                    <el-table-column label="内容状态" align="center" prop="articleExamineState" />
                    <el-table-column label="是否原创" align="center" prop="copyrightType" />
                    <!-- <el-table-column label="审核人" align="center" prop="actualExamineUserid" /> -->
                    <el-table-column label="审核意见"  align="center" prop="examineFailedReason" />
                    <el-table-column label="操作" fixed="right" width="200" align="center" class-name="small-padding fixed-width">
                        <template slot-scope="scope">
                            <el-button  icon="el-icon-search" size="small"
                                @click="preview(scope.row)">预览</el-button>
                            <el-button size="small"  icon="el-icon-monitor" type="success" plain
                                @click="handleExam(scope.row)">审核</el-button>

                        </template>
                    </el-table-column>
                </el-table>

                <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                    :limit.sync="queryParams.pageSize" @pagination="getList" />

            </div>
            <shenheView :preOpen="shenhe" :myRow="myRow" :isForm="true" @flushList="getList" @updatePre="updateshenhe">
            </shenheView>
            <shenheView :preOpen="preOpen" :myRow="myRow" :isForm="false" @updatePre="updatePre"></shenheView>
        </div>
    </div>
</template>

<script>
import arrow from '@/views/components/arrow'
import shenheView from '@/views/components/shenheview'
import { chugaoList, contentExamine, ArticlePreview } from '@/api/my'
export default {
    components: { arrow, shenheView },
    data() {
        return {
            topList: {
                title: '流程指引',
                list: [
                    { name: '素材管理', img: 'blue' },
                    { name: '内容创作', img: 'blue' },
                    { name: '专家审核', img: 'blue' },
                    { name: '产品分发', img: 'gray' },
                    { name: '传播管理', img: 'gray' },
                ]
            },
            status: [
                { value: 1, label: '待审核' },
                { value: 2, label: '审核中' },
                { value: 3, label: '审核通过' },
                { value: 4, label: '审核未通过' },
                { value: 5, label: '拒绝审核' },
            ],
            isOrigin: [
                { value: 1, label: '原创' },
                { value: 2, label: '网络' },
                { value: 3, label: '委托' },
            ],
            shenhe: false,
            myRow: {},  //要传的id
            preOpen: false,   //预览dialog开关
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                examineType: 0,
                articleTopicType: null,      //类型
                keyWords: null,  //关键词
            },
            TypeList: [
                {
                    value: 1,
                    label: '图片'
                }, {
                    value: 2,
                    label: '视频'
                }, {
                    value: 3,
                    label: '音频'
                }, {
                    value: 4,
                    label: '动漫'
                }, {
                    value: 5,
                    label: '挂图'
                },
                {
                    value: 6,
                    label: '缩略图'
                }
            ],
            //table数据
            topicList: [],
            // 总条数
            total: 0,
            loading: true,

        }
    },
    created() {
        this.getList();
    },
    methods: {
        preview(row) {
            this.myRow = row
            this.preOpen = true
        },
        updateshenhe(val) {
           // console.log(val, 'aaa');
            this.shenhe = val
        },
        updatePre(val) {
            // console.log(val,'bbb');
            this.preOpen = val
        },
        getList() {
            this.loading = false;
            contentExamine(this.queryParams).then(response => {
                response.rows.map(v => {
                    let typeFind = this.TypeList.find(values => values.value == v.type)
                    if (typeFind !== undefined) {  //内容类型
                        v.type = typeFind.label
                    }
                    let statusFind = this.status.find(r => r.value == v.articleExamineState)
                    if (statusFind !== undefined) {  //审核状态
                        v.articleExamineState = statusFind.label
                    }
                    let protosFind = this.isOrigin.find(params => params.value == v.copyrightType)
                    if (protosFind !== undefined) {
                        v.copyrightType = protosFind.label   
                    }
                    v.digest = this.$cutString(v.digest,8)
         v.target = this.$cutString(v.target,8)
         v.title = this.$cutString(v.title,8)
                    return v
                    // console.log(v);

                })
                //  console.log(response);
                this.topicList = response.rows;
                this.total = response.total;
                this.loading = false;
            });
        },
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.materialId)
            this.single = selection.length !== 1
            this.multiple = !selection.length
        },
        handlePreview(row) {
            // console.log(row, 123);
        },
        handleExam(row) {
            this.myRow = row
            this.shenhe = true
            // console.log(row, 456);
        }
    },

}
</script>

<style lang='scss' scoped>
.main {
    background-color: #f5f5f5;

    .content {
        background-color: white;
        margin-top: 10px;
        padding-left: 32px;
        .title_top {
            padding: 30px 0 20px 0;
            font-size: 16px;
            font-family: Microsoft YaHei, Microsoft YaHei;
            font-weight: 700;
            color: #3D3D3D;
            line-height: 21px;
        }
    }

}
</style>